import { FC, useState } from "react";
import { Layout, Breadcrumb, Typography, Space } from 'antd';
import './index.less';
import Menu from './components/menu';
import Nav from './components/Nav';
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
const { Header, Content, Footer, Sider } = Layout;

interface ChildType {
  title: string;
  key: string;
  auth: string;
}

export interface MenuItemList {
  title: string;
  key: string;
  icon: any;
  auth: string;
  children?: ChildType[];
}
const menuList: MenuItemList[] = [
  {
    title: '首页',
    key: '/admin/welcome',
    icon: <MailOutlined />,
    auth: '1',
  },
  {
    title: 'UI',
    key: '/admin/ui',
    icon: <AppstoreOutlined />,
    auth: '2',
    children: [
      {
        title: '按钮',
        key: '/admin/ui/buttons',
        auth: '12',
      },
      {
        title: '弹框',
        key: '/admin/ui/modals',
        auth: '13',
      },
      {
        title: 'Loading',
        key: '/admin/ui/loadings',
        auth: '14',
      },
      {
        title: '通知提醒',
        key: '/admin/ui/notification',
        auth: '15',
      },
      {
        title: '全局Message',
        key: '/admin/ui/messages',
        auth: '16',
      },
      {
        title: 'Tab页签',
        key: '/admin/ui/tabs',
        auth: '17',
      },
      {
        title: '图片画廊',
        key: '/admin/ui/gallery',
        auth: '18',
      },
      {
        title: '轮播图',
        key: '/admin/ui/carousel',
        auth: '19',
      },
    ],
  },
  {
    title: '表单',
    key: '/admin/form',
    icon: <AppstoreOutlined />,
    auth: '3',
    children: [
      {
        title: '登录',
        key: '/admin/form/login',
        auth: '20',
      },
      {
        title: '注册',
        key: '/admin/form/reg',
        auth: '21',
      },
    ],
  },
  {
    title: '表格',
    key: '/admin/table',
    icon: <AppstoreOutlined />,
    auth: '4',
    children: [
      {
        title: '基础表格',
        key: '/admin/table/basic',
        auth: '22',
      },
      {
        title: '高级表格',
        key: '/admin/table/high',
        auth: '23',
      },
    ],
  },
  {
    title: '富文本',
    key: '/admin/rich',
    icon: <AppstoreOutlined />,
    auth: '5',
  },
  {
    title: '城市管理',
    key: '/admin/city',
    icon: <AppstoreOutlined />,
    auth: '6',
  },
  {
    title: '订单管理',
    key: '/admin/order',
    icon: <AppstoreOutlined />,
    auth: '7',
    children: [
      {
        title: '订单详情',
        key: '/admin/order/detail',
        auth: '24',
      },
      {
        title: '结束订单',
        key: '/admin/order/finish',
        auth: '25',
      },
    ],
  },
  {
    title: '员工管理',
    key: '/admin/user',
    icon: <AppstoreOutlined />,
    auth: '8',
  },
  {
    title: '车辆地图',
    key: '/admin/bikeMap',
    icon: <AppstoreOutlined />,
    auth: '9',
  },
  {
    title: '图标',
    key: '/admin/charts',
    icon: <AppstoreOutlined />,
    auth: '10',
  },
  {
    title: '权限设置',
    key: '/admin/permission',
    icon: <MailOutlined />,
    auth: '11',
  },
];


const Admin: FC = (props) => {
  const [collapsed, set_coll] = useState<boolean>(false);
  const onCollapse = (collapsed: boolean) => {
    set_coll(collapsed);
  };
  return <Layout style={{ minHeight: '100vh' }}>
    <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
      <div className="logo" />
      <Menu menuList={menuList} />
    </Sider>
    <Layout className="site-layout">
      <Header className="site-layout-background" style={{ padding: "0 20", textAlign: "right" }} >
        <Space size="middle">
          <Typography.Text strong>欢迎你，xxx</Typography.Text>
          <Typography.Text type="success" style={{}} >退出</Typography.Text>
        </Space>
      </Header>
      <Nav />

      <Content style={{ margin: '30px 20px' }}>
        {props.children}
      </Content>
      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
  </Layout>
}
export default Admin;